<template>
  <div class="service" id="help_m">
    <div class="banner">
      <client-carousel arrows="never" height="640px" :url="banner" />
      <img src="@/assets/img/client/home/content/banner5.png" class="banner-img">
    </div>
    <div class="main">
      <client-title title="帮助中心" class="content-title" />
      <div class="min-container">
        <el-row :gutter="30">
          <el-col
            :span="6"
            :xs="24"
            :sm="24"
            :md="6"
            v-for="(item, index) in dataList"
            class="item"
            :key="index"
            @click="handleDetail(item)"
          >
            <div class="info">{{ item.helpName || "无" }}</div>
          </el-col>
          <el-col :span="6" :xs="24" :sm="24" :md="6" @click="handleDetail()">
            <div class="info more">查看更多》</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import ClientTitle from "@/components/client-title/client-title.vue";
import { getAssetURL } from "@/utils/load_assets";
import { helpList } from "@/api/other";
import { useRouter } from "vue-router";
const router = useRouter();

const bannerUrl = getAssetURL("client/home/content/banner3.png");
const banner = ref<any>([{ url: bannerUrl }]);
const dataList = ref<any>([]);

onMounted(() => {
  getHelpList();
});

// 获取帮助中心列表
const getHelpList = () => {
  helpList({}).then((res: any) => {
    let list = <any>[];
    res.data.forEach((item: any) => {
      item.children?.forEach((child: any) => {
        if (list.length < 11) list.push(child);
      });
    });
    dataList.value = list;
  });
};

// 跳转详情
const handleDetail = (row) => {
  let query = <any>{};
  if (row) query.helpId = row.helpId;
  router.push({
    path: "/client/helpCenter/details",
    query,
  });
};
</script>
<style lang="less" scoped>

.banner-img {
  width: 700px;
  height: 434px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.service {
  position: relative;

  .main {
    position: absolute;
    top: 0;
    width: 100%;

    .content-title {
      text-align: center;
      font-size: 28px;
      margin: 120px 0 60px 0;
    }

    .info {
      height: 88px;
      line-height: 88px;
      color: #313131;
      font-size: 23px;
      border: 2px solid #fff;
      background: linear-gradient(
        180deg,
        rgba(244, 245, 248, 0.6) 0%,
        rgba(255, 255, 255, 0.6) 90.02%
      );
      text-align: center;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
      margin-bottom: 40px;
      border-radius: 4px;
      color: #313131;
      backdrop-filter: blur(10px);
      transition: all 0.3s;
      &:hover {
        cursor: pointer;
        box-shadow: 0 0 10px rgb(255, 255, 255);
      }
    }

    .more {
      color: #909090;
    }
  }
}
</style>
